<template>
    <div id="clientContent" class="client_content centerclientuserinfo">
        <div class="client_box">
            <div class="list_wrap_body">
				<appInputAll @onChange="changeName" v-model="form.name" title="名称" placeholder="客户姓名（必填）"/>
				<appInputAll v-model="form.mobile_phone" @onChange="mobileIpt" title="联系方式" placeholder="手机号码（必填）"/>
				<appInputAll v-model="address" arrowsRight disabled @click.native="chooseCitys" title="地区" placeholder="请选择"/>
				<appInputAll @click="chooseCitys" v-model="form.xiaoqu" title="小区" placeholder="请输入小区名称"/>
				<appInputAll v-model="form.address" title="详细地址" placeholder="详细地址需填写到街道地址,如X街道X号"/>
				<appInputAll v-model="house_type" arrowsRight disabled @click.native="$refs.selectHouse.show()" title="户型" placeholder="请选择"/>
				<appInputAll v-if="form.house_type==2" v-model="form.house_remark" title="其他类型" placeholder="请输入其他户型"/>
				<appInputAll v-if="form.house_type==1" v-model="huxing" arrowsRight disabled @click.native="$refs.multiSelector.show()" title="户型类型" placeholder="请选择户型"/>
				<appInputAll type="number" v-model="form.square" @onChange="changeSquare" title="面积/m²" placeholder="请输入面积大小"/>
				<div class="edit_module_list" v-for="(i, pIndex) in filterMaskData" :key="pIndex">
					<div class="module_label">{{ i.title }}</div>
					<div class="module_val module_val_com">
						<div @click="filterMaskBtn(i.list, item.status, pIndex, index)" :class="['module_val_list' , item.status? 'active':'']" v-for="(item, index) in i.list" :key="index">{{ item.name }}</div>
					</div>
                </div>
				<!-- $refs.dateTime.show() -->
				<appInputAll v-model="form.quantity_room_date" arrowsRight disabled @click.native="$refs.dateTime.show()" title="量房时间" placeholder="请选择量房时间"/>
				<app-cell title="家具清单" @goBack="uploadImg">
					<div slot="value">
						<uploader class="decompy-list_img" :size="150" :num="1" :imgList.sync="form.contract_img" />
					</div>
				</app-cell>
				<div class="edit_module_list">
					<div class="module_label">备注</div>
					<div class="module_val module_val_com">
						<app-filed-textarea :autoHeight="false" class="app-wh100" v-model="form.remark" placeholder="请输入..." />
					</div>
				</div>
            </div>
        </div>
        <div class="app-footer" @click="savemessage">保存</div>
		<wPicker
			current
			@confirm="dateConfirm"
			mode="dateTime"
			ref="dateTime" />
		<mapvueCityPicker
			themeColor="#FFD11A"
			ref="mpvueCityPicker"
			:pickerValueDefault="defaultVal"
			@onConfirm="confirmCity" />
		<wPicker
			@confirm="onHuxingTypeConfirm"
			:selectList="columnsType"
			mode="selector"
			ref="selectHouse" />
			<!-- multiSelector -->
		<wPicker
			:multiSelectorList="columns"
			@confirm="onHuxingType"
			mode="multiSelector"
			ref="multiSelector" />
		<!-- <mxDatePicker
			:show="showPicker"
			type="rangetime"
			value=""
			:show-tips="true"
			:show-seconds="true"
			@confirm="onSelected"
			@cancel="onSelected"
		 /> -->
    </div>
</template>

<script>
import { allOptions } from '@/mixins'
import apiCenter from '@/api/center'
import appInputAll from '@/components/app_input_all'
import appCell from '@/components/app_cell'
import mapvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker'
import wPicker from '@/components/w-picker/components/w-picker'
import AppFiledTextarea from '@/components/AppFiledTextarea'
import uploader from '@/components/App_uploader'
// import mxDatePicker from '@/components/mx-datepicker/mx-datepicker'
export default {
	name: 'SubscribeOrderEdit',
	components: {
		appInputAll,
		appCell,
		mapvueCityPicker,
		wPicker,
		AppFiledTextarea,
		uploader
		// mxDatePicker
	},
	mixins: [allOptions],
	data() {
		return {
			// showPicker: false,
			defaultVal: [0, 0, 1],
			headtitle: '编辑资料',
			// isCity: false,
			// dateShow: false,
			// isSelectHuxing: false,
			// isSelectHuxingType: false,
			huxing: '',
			dateText: new Date(),
			// 新版省市区
			address: '',
			province_id: '',
			city_id: '',
			district_id: '',
			house_type: '',
			form: {
				name: '',
				mobile_phone: '',
				xiaoqu: '',
				address: '',
				quantity_room_date: '',
				remark: '',
				province_id: '',
				city_id: '',
				district_id: '',
				house_shi: '',
				house_ting: '',
				house_yang: '',
				house_wei: '',
				house_chu: '',
				square: '',
				user_id: '',
				contract_img: [],
				house_remark: ''
			},
			columnsType: [{ value: 1, label: '标准户型' }, { value: 2, label: '其他户型' }],
			columns: [
				this.formtHuxing('房', 'house_shi'),
				this.formtHuxing('厅', 'house_ting'),
				this.formtHuxing('卫', 'house_wei'),
				this.formtHuxing('阳台', 'house_yang'),
				this.formtHuxing('厨', 'house_chu')
			],
			filterMaskData: [
				{
					title: '当前阶段',
					type: 1,
					key: 'status',
					list: []
				},
				{
					title: '装修类型（多选）',
					key: 'renovation_type',
					type: 1,
					list: []
				},
				{
					title: '装修预算',
					key: 'budget_type',
					list: []
				}
			],
			selectData: {
				status: '',
				renovation_type: '', // 当前阶段（多选）
				budget_type: '' // 装修预算
				// 装修类型（多选）
			},
			query: null
		}
	},
	onLoad(val) {
		this.query = val
	},
	computed: {
		// currentTitile() {
		// 	return this.query.status === 'add' ? '' : '修改客户'
		// }
	},
	mounted() {
		this.init()
	},
	methods: {
		// onSelected(e) {
		// 	this.showPicker = false
		// 	console.log(e)
		// },
		formtHuxing(text, type, total = 10) {
			const arr = []
			for (let i = -1; i < total; i += 1) {
				const obj = {
					label: `${i + 1}${text}`,
					type,
					value: i + 1
				}
				arr.push(obj)
			}
			return arr
		},
		changeSquare(val) {
			this.$nextTick(() => {
				this.form.square = val.substring(0, 4)
			})
		},
		changXiaoqu(val) {
			this.$nextTick(() => {
				this.form.xiaoqu = val.substring(0, 15)
			})
		},
		changeName(val) {
			if (!this.$util.$checkName(val)) {
				this.form.name = val.substring(0, val.length - 1)
			}
		},
		onHuxingTypeConfirm(val, index) {
			this.house_type = val.result
			this.form.house_type = val.checkArr.value
		},
		onHuxingType(val) {
			this.huxing = val.result.join('')
			val.checkArr.forEach(i => {
				this.form[i.type] = i.value
			})
		},
		getDetailVal() {
			apiCenter
				.getSubscribeDetail({
					prebook_id: this.query.prebook_id
				})
				.then(res => {
					if (res.status === 'success') {
						const data = res.data
						Object.keys(this.form).forEach(i => {
							this.form[i] = data[i]
							this.address = data.full_address
							// this.address = this.getDistrict(data.district_id).join('')
						})
						if (data.house_type == '1') {
							this.house_type = '标准户型'
							this.huxing = (`${data.house_shi}房${data.house_ting}厅${data.house_yang}阳台${data.house_wei}卫${this.$util.isEmpty(data.house_chu) ? 0 : data.house_chu}厨`)
						} else if (data.house_type == '2') {
							this.house_type = '其他户型'
						}
						this.form.house_type = data.house_type
						this.form.quantity_room_date = this.form.quantity_room_date ? this.$util.$formatDate(data.quantity_room_date * 1000) : ''
						this.form.contract_img = this.$util.isEmpty(data.contract_img) ? [] : [data.contract_img]
						this.initSelectStatus(data)
					} else {
						uni.showToast({
							title: res.errors.message,
							icon: 'none'
						})
					}
				})
		},
		getOptions() {
			// sysBudgetStatus 预算   sysRenovationStatus 装修类型  sysBookingStatus 派单状态
			this.filterMaskData[0].list = this.formatOptions(this.sysBookingStatus)
			this.filterMaskData[1].list = this.formatOptions(this.sysRenovationStatus)
			this.filterMaskData[2].list = this.formatOptions(this.sysBudgetStatus)
		},
		async init() {
			await this.getOptions()
			if (!this.$util.isEmpty(this.query.status) && this.query.status === 'edit') {
				this.getDetailVal()
			}
		},
		mobileIpt(val) {
			this.$nextTick(() => {
				this.form.mobile_phone = val.substring(0, 11)
				if (val.length === 11) {
					if (this.$util.$checkMobile(this.form.mobile_phone)) {
						apiCenter
							.subscribeIsUserMerber({
								username: this.form.mobile_phone
							})
							.then(res => {
								if (res.status === 'success') {
									if (!this.$util.isEmpty(res.data)) {
										this.form.user_id = res.data.user_id
										// this.form.quantity_room_date =
									}
								} else {
									uni.showToast({
										title: res.errors.message,
										icon: 'none'
									})
								}
							})
					} else {
						this.form.mobile_phone = ''
						uni.showToast({
							title: '请输入正确的手机号码',
							icon: 'none'
						})
					}
				}
			})
		},
		confirmCity(val) {
			this.form.province_id = val.code[0]
			this.form.city_id = val.code[1]
			this.form.district_id = val.code[2]
			this.address = val.label
		},
		selectHomeRoom(val, index) {
			this.form[val.type] = index + 1
		},
		chooseCitys() {
			this.$refs.mpvueCityPicker.show()
		},
		// 时间插件弹窗
		dateConfirm(val) {
			this.form.quantity_room_date = val.result
		},
		sendAddWithUser() {
			const form = {}
			if (this.query.status === 'edit') {
				form.prebook_id = this.query.prebook_id
			}
			apiCenter
				.addSubscribeUser({
					...this.form,
					...this.formatFilterMaskData(),
					...form,
					contract_img: this.form.contract_img[0]
				})
				.then(res => {
					if (res.status === 'success') {
						uni.showToast({
							title: '创建客户成功',
							icon: 'none'
						})
						uni.navigateBack()
					} else {
						uni.showToast({
							title: res.errors.message,
							icon: 'none'
						})
					}
				})
		},
		// sendEdit () {
		//   apiCenter.editSendOrderUser({
		//     prebook_id: this.$route.query.prebook_id,
		//     ...this.form,
		//     ...this.formatFilterMaskData()
		//   })
		//     .then(res => {
		//       if (res.status === 'success') {
		//         this.$toast('修改客户成功')
		//         this.$router.back()
		//       } else {
		//         this.$toast(res.errors.message)
		//       }
		//     })
		// },
		savemessage() {
			this.sendAddWithUser()
		}
	}
}
</script>

<style lang="scss" scoped>
.list_wrap_body {
	padding-left: 20px;
}
.centerclientuserinfo {
	padding-bottom: 150px;
}
.decompy-list_img {
			float: right;
			margin-top: 20px;
        }
        // .uplodimg{
        //     background-image: url($imgUrl + "publicicon/icon_uplod.png");
        //     background-size: 100% 100%;
        // }
     .edit_module_list {
        position: relative;
        display: flex;
        box-sizing: border-box;
        padding: 15px 15px 15px 0;
        .module_label {
	width: 180px!important;
	font-size: 24px;
	color: #666;
	display: flex;
	align-items: center;
        }
        .module_val_com {
            flex-wrap: wrap;
            & .van-cell {
                padding: 0;
            }
        }
        .module_val {
            flex: 1;
            font-size: 24px;
            display: flex;
            align-items: flex-start;
            .module_val_list {
                width: calc(33.33% - 10px);
                height: 60px;
                line-height: 60px;
                text-align: center;
                background-color: #f5f5f5;
                border-radius: 10px;
                margin-right: 10px;
                margin-bottom: 10px;
            }
            .active {
                color: $fontColorMain;
                background-color: $mainColor;
            }
        }
    }
    .edit_module_list:after {
        content: ' ';
        position: absolute;
        pointer-events: none;
        left: 15px;
        right: 0;
        bottom: 1px;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        border-bottom: 1px solid #ebedf0;
    }
</style>
